import React from 'react';
import {Input, Button, message, Form, Select, Tabs, Upload} from 'antd';
import axios from 'axios'
import DepartmentPicker from '../../components/pickCity/departmentPicker'

const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;
const TabPane = Tabs.TabPane;
class addCar extends React.Component{
    constructor(props){
        super(props);
        this.state={
            sassFileList:[],
            ajaxData:{}
        }
    }
    callback=(key)=>{
        console.log(key);
    }
    /*----------登陆表单处理--------------*/
    validatePhone=(rule, value, callback)=>{
        let myreg=/^1[3|4|5|7|8][0-9]{9}$/;
        if (value&&!myreg.test(value)) {
            callback('请输入正确手机格式');
        } else {
            callback();
        }
    }

    componentWillMount(){
        this.DD()
    }

    //数据字典
    DD=()=>{
        axios.post('api/commParam/get',{'name':'batch_user'}).then(res=>{
            if(res&&res.data){
                this.setState(Object.assign(this.state.ajaxData,res.data))
            }
        })
    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                console.log('fail');
                return;
            }
            console.log('submit', values);
            values.companyId=JSON.parse(sessionStorage.getItem('token')).comPanyId;
            values.phone=values.account;
            this.addCarApi(values);
        });
    }

    addCarApi=(data)=>{
        axios.post('/api/user/add', {...data}).then(res => {
            if(res&&res.code==200){
                console.log('数据成功：',res);
                message.success('操作成功');
                this.props.history.go(-1)
            }
        })
    }

    //传完cdn后储存到数据库表格
    saveFile=(fileName)=>{
        axios.post('api/user/car/import',{fileName}).then(res=>{
            console.log(res)
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 2 },
                sm: { span: 2 },
                xl: {span:2}
            },
            wrapperCol: {
                xs: { span: 4 },
                sm: { span: 4 },
                xl: {span:4}
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 4,
                },
                sm: {
                    span: 4,
                },
            },
        };
        const accountConfig = {
            rules: [{required: true, message: '手机不能为空!' },
                {validator: this.validatePhone}
            ],
            validateTrigger: 'onBlur',
        };

        const nameCofig={
            rules: [{required: true, message: '姓名不能为空!' }],
        };

        const props = {
            name: 'file',
            action: axios.defaults.baseURL+'/uploadFile.do?resultFlag=2',
            headers: {
                authorization: 'authorization-text',
            },
            // 在上传开始前做校验
            beforeUpload:(file)=>{
                const isJPG = file.type === 'application/vnd.ms-excel';
                if (!isJPG) {
                    message.error('请上传EXCEL文件!');
                }
                return isJPG
            },
            onChange:(info)=> {
                if (info.file.status !== 'uploading') {
                    if(info.file.type!=='application/vnd.ms-excel'){
                        info.file.status='error';

                    }
                }
                if (info.file.status === 'done') {
                    var param={
                        fileName:info.file.response.data.fileIdList[0],
                    }
                    console.log(param);
                    axios.post('api/user/import', {...param}).then(res => {
                        if(res&&res.data){
                            message.success(`${res.data}`);
                        }
                    });
                } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 失败`);
                }
            },
        };

        return(
            <div>
                <Tabs onChange={this.callback} >
                    <TabPane tab="单个新增" key="1">
                        <div>
                            <form onSubmit={this.handleSubmit}>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('account')(
                                        <Input placeholder="员工账户" disabled/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('name',nameCofig)(
                                        <Input placeholder="员工姓名"/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('account',accountConfig)(
                                        <Input placeholder="手机号"/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('org')(
                                        <DepartmentPicker placeholder={'部门'}/>
                                    )}
                                </FormItem>
                                {/*<FormItem*/}
                                    {/*{...formItemLayout}*/}
                                    {/*label="所属部门"*/}
                                {/*>*/}
                                    {/*{getFieldDecorator('123sd')(*/}
                                        {/*<Select >*/}
                                            {/*<Option value="1">Option 1</Option>*/}
                                            {/*<Option value="2">Option 2</Option>*/}
                                            {/*<Option value="3">Option 3</Option>*/}
                                        {/*</Select>*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                {/*<FormItem*/}
                                    {/*{...formItemLayout}*/}
                                    {/*label="所属部门"*/}
                                {/*>*/}
                                    {/*{getFieldDecorator('222')(*/}
                                        {/*<Select >*/}
                                            {/*<Option value="1">Option 1</Option>*/}
                                            {/*<Option value="2">Option 2</Option>*/}
                                            {/*<Option value="3">Option 3</Option>*/}
                                        {/*</Select>*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                {/*<FormItem*/}
                                    {/*{...formItemLayout}*/}
                                    {/*label="最大充电数"*/}
                                {/*>*/}
                                    {/*{getFieldDecorator('max')(*/}
                                        {/*<Input placeholder="请输入最大充电数"/>*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                                <FormItem {...tailFormItemLayout}>
                                    <Button onClick={()=>{this.props.history.go(-1)}} style={{width:"45%",marginRight:'10%'}}>取消</Button>
                                    <Button type="primary" htmlType="submit" style={{width:"45%"}}>保存</Button>
                                </FormItem>
                            </form>
                        </div>
                    </TabPane>
                    <TabPane tab="批量新增" key="2">
                        <div>
                            <div>1、下载模板，将员工信息填写到模板中</div>
                            <a href={`https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/${this.state.ajaxData.value}`} download={this.state.ajaxData.title}>
                                <Button type="primary" icon="download" style={{margin:"20px 0 20px 60px"}}>下载模板</Button>
                            </a>
                        </div>
                        <div>
                            <div>2、将填写好的模板新增员工上传</div>
                            <Upload {...props}>
                                <Button  type="primary" icon="upload" style={{margin:"20px 0 20px 60px"}}>上传并新增</Button>
                            </Upload>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}
addCar=createForm()(addCar)
export default addCar
